<template>
  <div>
    <a-form :model="formState" ref="smsForm" v-bind="formItemLayout">
      <a-form-item name="serviceName" label="开启短信">
        <a-switch v-model:checked="formState.enable" checked-children="开启" un-checked-children="关闭"/>
      </a-form-item>
      <a-form-item name="accessKey" label="accessKey">
        <a-input v-model:value="formState.accessKey"/>
      </a-form-item>
      <a-form-item name="secretKey" label="secretKey">
        <a-input v-model:value="formState.secretKey"/>
      </a-form-item>
      <a-form-item name="smsTplCode" label="验证码模板">
        <a-input v-model:value="formState.smsTplCode"/>
      </a-form-item>
      <a-form-item name="signName" label="签名">
        <a-input v-model:value="formState.signName"/>
      </a-form-item>
      <a-form-item name="encryption" label="手机号加密">
        <a-switch v-model:checked="formState.encryption" checked-children="是" un-checked-children="否"/>
      </a-form-item>
      <a-form-item name="smsCodeHander" label="自定义验证码处理器">
        <a-input v-model:checked="formState.smsCodeHander"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab2" setup>
import {onMounted, ref} from 'vue';
import {getConfig, smsSave} from '../data/config.api';

const ossForm = ref();
const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 10},
};
const formState = ref({
  enable: false,
  accessKey: '',
  secretKey: '',
  smsTplCode: '',
  signName: '',
  encryption: false,
  smsCodeHander: '',
});

onMounted(() => {
  setData()
});


/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getConfig({
    configType: 'sms'
  }).then((data) => {
    formState.value = JSON.parse(data.SMS_CONFIG)
  })
}

/**
 * 表单提交
 */
async function handleSubmit() {
  smsSave({
    ...formState.value
  }).then(() => {

  })
}

</script>
